<!-- 留存分析 -->
<template>
  <div class="keep"
    style="background-color:#fff">
    <h2 class="title">留存分析</h2>
    <el-row class="info">
      <el-col :span="8">
        <h3>初始行为</h3>
        <el-select v-model="initialBehavior"
          placeholder="请选择">
          <el-option v-for="item in selectBehavior"
            :key="item.event_code"
            :label="item.event_name"
            :value="item.event_code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16">
        <h3>后续行为</h3>
        <el-select v-model="followUpBehavior"
          placeholder="请选择">
          <el-option v-for="item in selectBehavior"
            :key="item.event_code"
            :label="item.event_name"
            :value="item.event_code">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filterCondition">
      <el-row>
        <el-col :span="20">
          <h3>过滤条件</h3>
          <div class="select">
            <el-select @change="changeSelect"
              v-model="modelFilterSelecterValue"
              placeholder="请选择">
              <el-option v-for="(item,i) in filterSelecter"
                :key="i"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <span>等于</span>
            <el-select @change="changefilterTabs"
              v-model="filterTabsModelValue"
              placeholder="请选择">
              <el-option v-for="item in filterTabs"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <div class="tool">
              <i @click="addCondition"
                class="el-icon-plus"
                style="margin-left:4px;"></i>
              <i @click="removeCondition"
                class="el-icon-minus"
                style="margin-left:4px;"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <button @click="getTablesData"
            class="findClass">查询</button>
        </el-col>
      </el-row>
      <el-row class="addCondition"
        v-for="(value,i) in conditionGather"
        :key="i">
        <el-col :span="20">
          <div class="select">
            <el-select @change="changeAddSelect(value)"
              v-model="filterMain[value]"
              placeholder="请选择">
              <el-option v-for="(item,i) in filterSelecter"
                :key="i"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <span>等于</span>
            <el-select @change="changeSelectTabs"
              v-model="filterTabsAddvalue[value]"
              placeholder="请选择">
              <el-option v-for="item in filterTabsSelect[value]"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <div class="tool">
              <i @click="addCondition"
                class="el-icon-plus"
                style="margin-left:4px;"></i>
              <i @click="removeCondition"
                class="el-icon-minus"
                style="margin-left:4px;"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
    </div>
    <div class="tables">
      <el-row class="datestyle">
        <el-date-picker v-model="dates"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-row>
      <el-row class="tableWrapper">
        <el-table :data="tablesData"
          border
          height="550"
          style="width:100%">
          <el-table-column prop="dateValue"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column v-for='(item,i) in tablesData'
            :key="i"
            :label="i===0?'当日':'第'+i+'日'"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.subs[i]"
                style="text-align:center">

                {{scope.row.subs[i]['people']+'人'}}
                <br>
                {{scope.row.subs[i]['percent']+'%'}}

              </span>
              <!-- {{scope.row.subs[i]}} -->
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectBehavior: [],
      initialBehavior: '',
      followUpBehavior: '',
      conditionGather: [],
      filterSelecter: [],
      modelFilterSelecterValue: '',
      //条件标签详细信息
      filterTabs: [],
      filterTabsModelValue: '',
      mainFilterParams: [],
      filterMain: {},
      filterTabsAddvalue: {},
      filterTabsSelect: {
        host0: [],
        host1: [],
        host2: [],
        host3: [],
        host4: [],
        host5: [],
        host6: [],
        host7: [],
        host8: [],
        host9: [],
        host10: [],
        host11: []
      },
      findDataMax: [],
      dates: [],
      tablesData: []
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    this.dates = [this.fun_date, this.getDefaultDate]

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getInfoBehavior()
    this.getFilterInfo()
  },
  methods: {
    //初始数据
    async getInfoBehavior () {
      const res = await this.$http.post('http://8.134.11.223:8080/userprofile-platform/v1/DataAnalysis/eventList')
      if (res.data.code !== 0) return
      this.selectBehavior = res.data.data
    },
    //添加条件
    addCondition () {
      const name = 'host' + this.conditionGather.length
      this.conditionGather.push(name)
    },
    //移除条件
    removeCondition () {
      const value = this.conditionGather[this.conditionGather.length - 1]
      this.filterMain[value] = ''
      this.filterTabsSelect[value] = []
      this.filterTabsAddvalue[value] = ''
      this.conditionGather.splice(this.conditionGather.length - 1, 1)
      this.findDataMax.splice(this.findDataMax.length - 1, 1)
      console.log(this.findDataMax);
    },
    //条件数据
    async getFilterInfo () {
      const res = await this.$http.post('http://8.134.11.223:8080/userprofile-platform/v1/DataAnalysis/dropDownListKey')
      if (res.data.code !== 1) return
      this.filterSelecter = res.data.data.list
    },
    async changeSelect () {
      console.log(this.modelFilterSelecterValue);
      this.filterTabs = await this.getFilterSelect(this.modelFilterSelecterValue)
      console.log(this.filterTabs);
    },
    async getFilterSelect (params) {
      const res = await this.$http.post('http://8.134.11.223:8080/userprofile-platform/v1/DataAnalysis/dropDownListValue?level_2_name=' + params)
      if (res.data.code !== 1) return
      return res.data.data.list
    },
    changefilterTabs () {
      const index = this.mainFilterParams.findIndex(item => {
        return item['type'] === 'host'
      })
      if (index !== -1) {
        this.mainFilterParams.splice(index, 1)
      }
      const data = this.filterTabs.filter(item => {
        return item.name === this.filterTabsModelValue
      })
      data.type = 'host'
      this.mainFilterParams.push(data)
      let host = this.mainFilterParams[0][0]
      this.findDataMax.push(host)
      console.log(this.findDataMax);
    },
    async changeAddSelect (value) {
      const res = await this.getFilterSelect(this.filterMain[value])
      this.filterTabsSelect[value] = res
    },
    changeSelectTabs () {
      //首次值，不会增加也不会减少，脱离三界之外。
      let host = []
      this.findDataMax = []
      const keys = Object.keys(this.filterTabsAddvalue)
      console.log(this.filterTabsAddvalue);
      console.log(this.filterTabsSelect);
      console.log(keys);
      if (this.mainFilterParams.length > 0) {
        host = this.mainFilterParams[0][0]
        this.findDataMax.push(host)
      }
      console.log(this.findDataMax);
      keys.forEach(item => {
        this.filterTabsSelect[item].forEach(value => {
          if (value.name === this.filterTabsAddvalue[item]) {
            //这里将拿到最终奥义，每次点击，都会形成
            this.findDataMax.push(value)
          }
        })
      })
    },
    async getTablesData () {
      console.log(this.dates);
      console.log(this.findDataMax);
      let params = {
        eventCode: [{ eventCode: this.initialBehavior }, { eventCode: this.followUpBehavior }],
        filterParameter: this.findDataMax,
        startDate: this.dates[0],
        endDate: this.dates[1]
      }
      const res = await this.$http.post('http://8.134.11.223:8080/userprofile-platform/v1/DataAnalysis/remainAnalysis', params)
      if (res.data.code !== 1) return
      this.tablesData = res.data.data.detailList
      console.log(this.tablesData);
    }
  }
  , computed: {
    getDefaultDate () {
      const date = new Date()
      const y = date.getFullYear()
      const m = (date.getMonth() + 1 + '').padStart(2, '0')
      const d = (date.getDate() + '').padStart(2, '0')
      return y + '-' + m + '-' + d
    },
    fun_date () {
      var date1 = new Date(),
        time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
      var date2 = new Date(date1);
      date2.setDate(date1.getDate() - 7);
      var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
      return time2;
    }
  }
}
</script>
<style scoped>
.keep .info {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
}
.keep .info .el-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-items: flex-start;
}
.keep .info .el-col:nth-of-type(1) {
  padding-left: 20px;
}
.filterCondition {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  padding-left: 20px;
}
.filterCondition .el-row {
  display: flex;
  flex-direction: row;
}
.filterCondition .el-row .el-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.filterCondition .el-row .el-col .select {
  display: flex;
  align-items: center;
}
.filterCondition .el-row .el-col .select span {
  padding: 0px 10px;
}
.select .tool {
  padding: 0px 10px;
}
.addCondition {
  padding-top: 10px;
}
.tables {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.tables .datestyle {
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.tables .tableWrapper {
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.title {
  text-align: left;
  padding-left: 20px;
  background-color: rgb(242, 242, 242);
  height: 42px;
  line-height: 42px;
  font-weight: 400;
  margin: 0;
  padding: 10px 20px;
}
.findClass {
  background: rgb(255, 139, 47);
  width: 60px;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 20px;
  color: #fff;
}
</style>